<template>
  <div
  v-loading="loading"
  element-loading-text="数据加载中"
  element-loading-spinner="el-icon-loading"
  style="height: 100%;"
  >

  <div id="mainBox">
    <p id="MyprojectTitle">参与项目</p>
    <p class="thirdTitle">共有{{showData.length}}个项目</p>
    <el-row>
      <el-col :span="8">
          <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
              </el-option>
          </el-select>
      </el-col>
      <el-col :span="12">
          <p class="ProjcetName">项目名称</p>
          <el-input v-model="keywords" placeholder="请输入项目名称" style="width: 300px;"></el-input>
      </el-col>
    </el-row>

    <div id="bodyCard">
        <el-card id="card" class="box-card" v-for="(item,index) in showData" :key="index">
          <div slot="header" class="clearfix">
            <span>{{item.batchName}}</span>
            <span style="float: right; padding: 3px 0" type="text"></span>
          </div>
          <div id="ProjectInfo">
            <p class="secondTitle">{{item.proName}}</p>
            <p class="thirdTitle">项目级别: {{item.levelName}}</p>
            <p class="thirdTitle">当前状态: {{formateStatus(item.proApproval)}}</p>
          </div>

          <table border="1" >
            <thead>
              <th width="20%">
                  <p>流程名称</p>
              </th>
              <th>
                <p>状态</p>
              </th>
              <th width="20%">
               <p>操作</p>
              </th>
            </thead>
            <tbody>
              <tr>
                <td>项目申报</td>
                <td>{{item.projectTeacherStart}}至{{item.projectTeacherEnd}}</td>
                <td>
                  <el-button type="text" @click="checkDeclare(item.proId)">查看</el-button>
                </td>
              </tr>
              <tr v-if="item.phaseInfo.length!=0">
                <td>阶段检查</td>
                <td>
                  <div v-for="(a,index) in item.phaseInfo" :key="index" style="margin: 10px 0;">
                    <el-row>
                      <el-col :span="12">
                        <p style="text-align: left;margin: 0;">{{a.phaseName}}</p>
                      </el-col>
                      <el-col :span="12">
                        <span>{{a.phaseTeacherStart}}至{{a.phaseTeacherEnd}}</span>
                      </el-col>
                    </el-row>
                  </div>
                </td>
                <td>
                  <el-button type="text">查看</el-button>
                </td>
              </tr>

              <tr v-if="item.closingInfo.length!=0">
                <td>项目结题</td>
                <td>1</td>
                <td>
                  <el-button type="text">查看</el-button>
                </td>
              </tr>
            </tbody>

          </table>
        </el-card>
    </div>

  <div class="resource-page">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5,10, 15]"
      :page-size="pagesize"
      :pager-count="7"
      layout=" prev, pager, next,sizes, jumper"
      :total="showData.length"
    >
    </el-pagination>
  </div>
  </div>
  </div>
</template>

<script>
  export default{
    watch:{
      keywords(){
        this.searchResource()
      },
      pagesize(){
        this.changePage()
      }
    },
    mounted() {
      this.getMyprojectInfo()
    },
    methods:{
      changePage(){
        this.showData=this.hostProjectInfo.slice(
          (this.currentPage - 1) * this.pagesize,
          this.currentPage * this.pagesize
        );
        console.log(this.showData)
      },
      searchResource() {
        this.currentPage = 1; //将当前页设置为1，确保每次都是从第一页开始搜
        let filterKeywords = this.keywords.trim();
        let filerReasource = this.hostProjectInfo.filter((item) => {
          //过滤全部数据
          if (item.proName.includes(filterKeywords)) {
            return item;
          }
        });
        this.showData = filerReasource; //将符合条件的内容赋给filterDataShow
      },
      handleSizeChange(psize) {
        this.pagesize = psize;

      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;

      },
      formateStatus(StatuId){
        //项目审核(-1 申报 0  暂存  1   提交    2  学院通过  3 专家审核    4  学校通过   5   驳回  6  学院不通过   7 学校不通过 8 学校二审通过 9 学校二审不通过 10 院级阶段检查通过 11 院级阶段检查不通过  12 校级阶段检查通过 13 校级阶段检查不通过 14 学院结项检查通过 135 学院结项不通过 16 专家结项通过 17学校结项通过 18 学校结项不通过 19校级同意延期 20校级不同意延期 21 申请延期 22 院级同意延期 23 院级不同意延期)
        if(StatuId==-1){
          return "申报"
        }
        if(StatuId==0){
          return "暂存"
        }
        if(StatuId==1){
          return "提交"
        }
        if(StatuId==2){
          return "学院通过"
        }
        if(StatuId==3){
          return "专家审核"
        }
        if(StatuId==4){
          return "学校通过"
        }
        if(StatuId==5){
          return "驳回"
        }
        if(StatuId==6){
          return "学院不通过"
        }
        if(StatuId==7){
          return "学校二审通过"
        }
        if(StatuId==8){
          return "学校二审通过"
        }
        if(StatuId==9){
          return "学校二审不通过"
        }
      },
      checkDeclare(proId){
        this.$router.push({path:'/lookOver',query:{pro_id:proId}})
      },
      getMyprojectInfo(){
        this.$api.project.getPartakeProjects({}).then((res)=>{
          this.hostProjectInfo=res.data.data
          this.changePage()
          this.loading=false
        })
      }
    },
    data(){
      return{
            loading:true,
            pagesize: 5,
            currentPage: 1,
            showData:[],
            hostProjectInfo:[],
            keywords: '',
            options: [{
              value: '选项1',
              label: '所有项目'
            }],
            value: '',
            tableData: []
      }
    }
  }
</script>

<style scoped>
p{
  margin: 15px 0;
}
table{
  width: 100%;
  border: 1px solid #d0d0d0;
  border-collapse:collapse;
}

table td{
  text-align: center;
}

thead th p{
  font-size: 18px;
  font-weight: 800;
  margin: 5px 0;
}

#ProjectInfo{
  padding:0 0 0 20px;
}
#mainBox{
  width: 900px;
  margin: 0 auto;
}
#bodyCard{
  margin-top: 20px;
}
#card{
  margin-top: 20px;
}
.ProjcetName{
  display: inline;
}
#MyprojectTitle{
  font-size: 40px;
}
.secondTitle{
  margin: 0;
  font-size: 25px;
}
.thirdTitle{
  font-size:15px;
  color: #9a9a9a;
}


</style>
